<template>
  <div>
    <el-table
      :data="tableData"
      border
      stripe
      highlight-current-row
      ref="multipleTable"
      tooltip-effect="dark"
      style="width: 100%">
<!--      @selection-change='selectArInfo'>-->
      <el-table-column type="selection" width="45px"></el-table-column>
      <el-table-column label="序号" width="62px" type="index">
      </el-table-column>
      <template v-for='column in columns'>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          :prop="column.prop"
          :label="column.label"
          :key="column.prop"
          :width="column.width"
          :min-width="column.minWidth">
        </el-table-column>
      </template>
      <el-table-column
        v-if="tableOperation.operation"
        :fixed="tableOperation.fixed"
        label="操作"
        :align="align || 'center'"
        :width="tableOperation.operateColumnWidth || 230">
        <template slot-scope="scope">
          <el-button
            v-for="(item, index) in tableOperation.operation"
            @click="handleClick(scope.row, item.type, scope.$index)"
            :key="index"
            :size="item.size || 'mini'"
            :style="{color: item.color|| ''}"
            :icon="item.icon"
            type="text">{{item.name}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "table",
    components: {
    },
    props: {
      tableData: Array, // 表格数据
      columns: Array, // 表格列配置
      /** 表格操作配置 */
      tableOperation: {
        /** 操作 */
        fixed: {
          type: Boolean,
          default: false
        },
        operation:  Array,
        operateColumnWidth: Number
      }
    },
    methods: {
      handleClick(row, type, index) {
        this.$emit('handleClick', row, type, index)
      }
    }
  }
</script>

<style scoped>

</style>
